body {
    margin: 0;
}
html,body,#app{
    height: 100%;
}

:root{
    --theme: #42b983;
}

#app {
    display: flex;
    flex-direction: column;
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}

a {
    color: var(--theme);
}

.main {
    width: 80%;
    /* min-height: 500px; */
    flex-shrink: 0;
    margin: 2rem auto;
    display: flex;
    /* align-items: center; */
}

.card-con {
    flex: 1;
    filter: drop-shadow(0.5rem 0.5rem 0rem #F3F4F5);
}
.nav{
    margin: 2rem;
}
.side {
    flex: 1;
    text-align: left;
    align-self: flex-start;
    min-width: 0;
}

.card {
    width: 400px;
    height: 250px;
    margin: 2rem auto;
    border-radius: .5rem;
    background: linear-gradient(var(--theme),#2c3e50);
}
.item{
    display: flex;
    align-items: center;
    margin: 2rem 0;
}
.name{
    font-size: 1.5rem;
    margin-right: 1rem;
    text-transform: capitalize;
}

@media screen and (max-width: 1200px) {
    .main{
        width: 90%;
    }
}

@media screen and (max-width: 1000px) {
    html{
        font-size: 14px;
    }
    .main{
        flex-direction: column;
        width: auto;
        /* min-height: 0; */
        margin: 0 2rem;
        align-items: stretch;
    }
    .card{
        width: 80%;
    }
    .side{
        align-self: stretch;
    }
}
@media screen and (max-width: 500px) {
    html{
        font-size: 12px;
    }
    .card{
        width: auto;
        height: auto;
        padding-top: 60%;
    }
}
/* [type=range] */
[type=range]{
    display: block;
    -webkit-appearance: none;
    flex: 1;
    outline: 0;
}
[type=range]::-webkit-slider-runnable-track{
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background: #F3F4F5;
    border-radius: 99rem;
}
[type=range]::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    cursor: pointer;
    background: #F3F4F5;
    border-radius: 99rem;
}
[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100%;
    background: var(--theme);
    border: 0;
    /* box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); */
    cursor: pointer;
    margin-top: -0.5rem;
    transition: .2s;
}
[type=range]::-moz-range-thumb {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 100%;
    background: var(--theme);
    border: 0;
    /* box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.1); */
    cursor: pointer;
    margin-top: -0.5rem;
    transition: .2s;
}
[type=range]:focus::-webkit-slider-thumb{
    box-shadow:  0 0 0 0.25rem rgba(255,255,255,0.6), 0 0 0 0.25rem var(--theme);
}
[type=range]:focus::-moz-range-thumb {
    box-shadow:  0 0 0 0.25rem rgba(255,255,255,0.6), 0 0 0 0.25rem var(--theme);
}
[data-tips] {
    position: relative;
}

[type="range"][data-tips] {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 0 .75rem;
}

[type="range"][data-tips]::-webkit-slider-runnable-track {
    margin: 0 -.75rem;
}

[data-tips]::before,
[data-tips]::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    transform: translate(-50%, -20px);
    opacity: 0;
    transition: all .15s .15s, left 0s, top 0s;
    color: rgba(0, 0, 0, 0.75);
    visibility: hidden;
    pointer-events: none;
    font-family: Inconsolata,Monaco,Consolas,"Courier New",Courier,monospace;
}

[data-tips]::before {
    content: attr(data-tips);
    border-radius: .5rem;
    padding: 0.5rem 1rem;
    text-align: left;
    background-color: #2c3e50;
    color: #fff;
    font-size: 1.5rem;
    font-style: normal;
    width: max-content;
    max-width: 200px;
    left: calc(var(--percent, .5) * 100%);
    bottom: 100%;
    transform: translate(-50%, -1rem);
}

[data-tips]::after {
    width: 0;
    height: 0;
    overflow: hidden;
    border: 0.5rem solid transparent;
    left: calc(var(--percent, .5) * 100%);
    bottom: 100%;
    transform: translate(-50%, -1rem);
    margin-bottom: -1rem;
    border-top-color: #2c3e50;
}

[data-tips]:hover::before,
[data-tips]:hover::after,
[data-tips]:focus-visible::before,
[data-tips]:focus-visible:focus::after {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -1.5rem);
}
/* type=radio */
[type="radio"] {
    font-size: 100%;
    -webkit-appearance: none;
    display: inline-flex;
    box-sizing: border-box;
    transition: .2s;
    font-size: 1.4rem;
    padding: 0.3em 0.5em;
    background: #F3F4F5;
    cursor: pointer;
    outline: 0;
    margin: 0;
    color: var(--theme);
}

[type="radio"]::before {
    content: attr(value);
}

[type="radio"]:checked {
    color: #fff;
    background-color: var(--theme);
}

[type=radio]:focus{
    box-shadow: 0 0 0 0.25rem rgba(255,255,255,0.6), 0 0 0 0.25rem var(--theme);
    transform: translate(0,0);
}
.radio:focus-within{
    z-index: 1;
}
.radio:first-of-type [type=radio]{
    border-radius: 0.5rem 0 0 0.5rem;
}

.radio:last-of-type [type=radio]{
    border-radius: 0 0.5rem 0.5rem 0;
}
[type=radio]:first-of-type:not(:last-of-type) {
    border-radius: 0.5rem 0 0 0.5rem;
}
[type=radio]:last-of-type:not(:first-of-type){
    border-radius: 0 0.5rem 0.5rem 0;
}

[type="radio"]::before{
    content: '\A';
    display: block;
    width: 2rem;
    white-space: pre;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    color: inherit;
    background: currentColor;
  }
[type="radio"][name="dir"]:checked::before{
    opacity: 1;
}
[type="radio"][name="dir"][value="horizontal"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 40c5.523 0 10-4.477 10-10S13.523 20 8 20v20zM52 20c-5.523 0-10 4.477-10 10s4.477 10 10 10V20z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[type="radio"][name="dir"][value="vertical"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21 8c0 5.523 4.477 10 10 10s10-4.477 10-10H21zM40 52c0-5.523-4.477-10-10-10s-10 4.477-10 10h20z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[type="radio"][name="dir"][value="both"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8 40c5.523 0 10-4.477 10-10S13.523 20 8 20v20zM21 8c0 5.523 4.477 10 10 10s10-4.477 10-10H21zM52 20c-5.523 0-10 4.477-10 10s4.477 10 10 10V20zM40 52c0-5.523-4.477-10-10-10s-10 4.477-10 10h20z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="horizontal"] [type="radio"][name="pos"][value="start"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.5 13a2.5 2.5 0 0 1 0-5h39a2.5 2.5 0 0 1 0 5h-39zM8 40c5.523 0 10-4.477 10-10S13.523 20 8 20v20zm34-10c0-5.523 4.477-10 10-10v20c-5.523 0-10-4.477-10-10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="horizontal"] [type="radio"][name="pos"][value="center"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M52 10.5A2.5 2.5 0 0 0 49.5 8h-39a2.5 2.5 0 0 0 0 5h39a2.5 2.5 0 0 0 2.5-2.5zm0 39a2.5 2.5 0 0 0-2.5-2.5h-39a2.5 2.5 0 0 0 0 5h39a2.5 2.5 0 0 0 2.5-2.5zM52 20c-5.523 0-10 4.477-10 10s4.477 10 10 10V20zM18 30c0 5.523-4.477 10-10 10V20c5.523 0 10 4.477 10 10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="horizontal"] [type="radio"][name="pos"][value="end"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M49.5 47a2.5 2.5 0 0 1 0 5h-39a2.5 2.5 0 0 1 0-5h39zM52 20c-5.523 0-10 4.477-10 10s4.477 10 10 10V20zM18 30c0 5.523-4.477 10-10 10V20c5.523 0 10 4.477 10 10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="vertical"] [type="radio"][name="pos"][value="start"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13 49.5a2.5 2.5 0 0 1-5 0v-39a2.5 2.5 0 1 1 5 0v39zM40 52c0-5.523-4.477-10-10-10s-10 4.477-10 10h20zM30 18c-5.523 0-10-4.477-10-10h20c0 5.523-4.477 10-10 10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="vertical"] [type="radio"][name="pos"][value="center"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M40 52c0-5.523-4.477-10-10-10s-10 4.477-10 10h20zm-29.5 0a2.5 2.5 0 0 0 2.5-2.5v-39a2.5 2.5 0 0 0-5 0v39a2.5 2.5 0 0 0 2.5 2.5zm39 0a2.5 2.5 0 0 0 2.5-2.5v-39a2.5 2.5 0 0 0-5 0v39a2.5 2.5 0 0 0 2.5 2.5zM30 18c-5.523 0-10-4.477-10-10h20c0 5.523-4.477 10-10 10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[direction="vertical"] [type="radio"][name="pos"][value="end"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M47 10.5a2.5 2.5 0 0 1 5 0v39a2.5 2.5 0 0 1-5 0v-39zM20 8c0 5.523 4.477 10 10 10s10-4.477 10-10H20zm10 34c5.523 0 10 4.477 10 10H20c0-5.523 4.477-10 10-10z' fill='%23EC7979'/%3E%3C/svg%3E")
}
[type="radio"][name="split"][value="dashed"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='50' height='10' viewBox='0 0 50 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 0h10v10H0V0zm20 0h10v10H20V0zm30 0H40v10h10V0z' fill='%23C4C4C4'/%3E%3C/svg%3E")
}
[type="radio"][name="split"][value="dotted"]::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='50' height='10' viewBox='0 0 50 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 5A5 5 0 1 1 0 5a5 5 0 0 1 10 0zm20 0a5 5 0 1 1-10 0 5 5 0 0 1 10 0zm15 5a5 5 0 1 0 0-10 5 5 0 0 0 0 10z' fill='%23C4C4C4'/%3E%3C/svg%3E")
}